<template>
  <div class="form-section" v-if="formData.config.has_customize">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.has_modal', '弹窗')"
          :tooltipContent="
            $t(
              'menu.dev.action.tip.has_modal',
              '方法的交互是否需要弹窗，类似于add/update方法，需要填写表单',
            )
          "
          prop="config.customize.has_modal"
        >
          <el-radio-group v-model="formData.config.customize.has_modal">
            <el-radio :value="true">需要(Yes)</el-radio>
            <el-radio :value="false">不需要(No)</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.has_fields', '弹窗表单')"
          :tooltipContent="
            $t(
              'menu.dev.action.tip.has_fields',
              '方法的交互是否需要字段表单，类似于add/update方法，需要填写表单',
            )
          "
          prop="config.customize.has_fields"
        >
          <el-radio-group v-model="formData.config.customize.has_fields">
            <el-radio :value="true">需要(Yes)</el-radio>
            <el-radio :value="false">不需要(No)</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';
import { watch } from 'vue';

const props = defineProps({
  formData: {
    type: Object,
    required: true,
  },
});

watch(
  () => props.formData.config.customize.has_modal,
  (newValue) => {
    if (newValue === false) {
      props.formData.config.customize.has_fields = false;
    }
  },
  { immediate: true },
);

watch(
  () => props.formData.config.customize.has_fields,
  (newValue) => {
    if (newValue === true) {
      props.formData.config.customize.has_modal = true;
    }
  },
  { immediate: true },
);
</script>

<style lang="scss" scoped></style>
